<breadcrumb />

<mat-card class="example-container">
  <mat-card-content>
    <mat-form-field>
      <input matInput placeholder="Input" />
    </mat-form-field>

    <mat-form-field>
      <textarea matInput placeholder="Textarea"></textarea>
    </mat-form-field>

    <mat-form-field>
      <mat-select placeholder="Select">
        <mat-option value="option">Option</mat-option>
      </mat-select>
    </mat-form-field>
  </mat-card-content>
</mat-card>

<mat-card class="example-container">
  <mat-card-content>
    <form [formGroup]="options">
      <mat-checkbox formControlName="hideRequired">Hide required marker</mat-checkbox>
      <div>
        <label for="">Float label:</label>
        <mat-radio-group formControlName="floatLabel">
          <mat-radio-button value="auto">Auto</mat-radio-button>
          <mat-radio-button value="always">Always</mat-radio-button>
          <mat-radio-button value="never">Never</mat-radio-button>
        </mat-radio-group>
      </div>
    </form>

    <mat-form-field
      [hideRequiredMarker]="options.value.hideRequired"
      [floatLabel]="options.value.floatLabel"
    >
      <input matInput placeholder="Simple placeholder" required />
    </mat-form-field>

    <mat-form-field [floatLabel]="options.value.floatLabel">
      <mat-label>Both a label and a placeholder</mat-label>
      <input matInput placeholder="Simple placeholder" />
    </mat-form-field>

    <mat-form-field
      [hideRequiredMarker]="options.value.hideRequired"
      [floatLabel]="options.value.floatLabel"
    >
      <mat-select required>
        <mat-option>-- None --</mat-option>
        <mat-option value="option">Option</mat-option>
      </mat-select>
      <mat-label>
        <mat-icon>favorite</mat-icon>
        <b>Fancy</b>
        <i>label</i>
      </mat-label>
    </mat-form-field>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-content>
    <p>
      <mat-form-field>
        <mat-label>Standard form field</mat-label>
        <input matInput placeholder="Placeholder" />
        <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
        <mat-hint>Hint</mat-hint>
      </mat-form-field>
    </p>
    <p>
      <mat-form-field appearance="fill">
        <mat-label>Fill form field</mat-label>
        <input matInput placeholder="Placeholder" />
        <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
        <mat-hint>Hint</mat-hint>
      </mat-form-field>
    </p>
    <p>
      <mat-form-field appearance="outline">
        <mat-label>Outline form field</mat-label>
        <input matInput placeholder="Placeholder" />
        <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
        <mat-hint>Hint</mat-hint>
      </mat-form-field>
    </p>
  </mat-card-content>
</mat-card>
